<template>
  <div class="intelligent-container">
    <div class="intelligent-header">
      <div class="title-wrap">
        <div class="title">标签分析</div>
        <div class="dec">开启标签分析后，可通过能链大数据提供的用户画像分层能力对油站用户进行标签分析</div>
      </div>
      <div class="check-wrap">
          <el-select v-model="gasId" size="mini">
            <el-option v-for="item in gasOptions" :key="item.gasId" :value="item.gasId" :label="item.gasName"></el-option>
          </el-select>
        <div class="btn" @click="refresh">刷新标签</div>
      </div>
    </div>
    <div class="content-wrap">
      <div class="content-header-top">
        <div class="content-title">分群概述</div>
        <div class="content-tip">系统推荐分群标签注：每天5:00系统更新数据</div>
      </div>
      <div class="content-header-bottom">
        <div class="content-des">可通过能链大数据提供的用户画像分层能力对油站用户群体进行标签分析，</div>
        <div class="content-des">简单来说，就是通过分析油站的用户画像来对人群进行精细化运营，有效提高客户的贡献值。</div>
      </div>
      <div class="content-tag-wrap" v-loading="loading">
        <div class="tag-wrap" v-for="(item,index) in dataList" :key="index">
          <div class="tag-header" :class="index%3 === 1 ? 'gray' : index%3 === 2 ? 'yellow' : ''">{{item.labelName}}</div>
          <div class="tag-content">
            <div class="tag-num">{{item.count}}</div>
            <div class="tag-num-des">符合条件的用户</div>
            <div class="tag-time bottom">标签创建时间：{{item.createTime}}</div>
            <div class="tag-time">标签更新时间：{{item.updateTime}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAllGasInfoList } from '@/api/gasStationManage/gasInfo'
import { getLabelsByGasId } from '@/api/member'
export default {
  data () {
    return {
      loading: false,
      dataList: [],
      gasId: '',
      gasOptions: []
    }
  },
  mounted () {
    this.initGasNameSelect()
  },
  methods: {
    // 获取所有油站名称
    async initGasNameSelect () {
      try {
        const { code, result } = await getAllGasInfoList()
        if (code !== 200) return
        if (result) {
          this.gasOptions = result.map(item => {
            return {
              gasName: item.gasName,
              gasId: item.gasId
            }
          })
          if (this.gasOptions.length) {
            this.gasId = this.gasOptions[0].gasId
            this.getTag()
          }
        }
      } catch (err) {
        console.log(err)
      }
    },
    // 获取智能分群标签
    async getTag () {
      this.loading = true
      try {
        const { code, result } = await getLabelsByGasId({ gasId: this.gasId })
        if (code !== 200) return
        this.dataList = result
      } catch (error) {
        console.log(error.message)
      } finally {
        this.loading = false
      }
    },
    // 刷新标签
    refresh () {
      this.getTag()
    }
  }
}
</script>
<style lang="less" scoped>
.intelligent-container{
  margin: 20px 10px 0 10px;
  font-family: PingFangSC-Regular, PingFang SC;
  .intelligent-header{
    background-color: #fff;
    padding: 23px 40px 22px 42px;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title-wrap{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        margin-bottom: 20px;
      }
      .dec{
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .check-wrap{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      .btn{
        margin-top: 15px;
        width: 122px;
        height: 48px;
        background: #4B7EFE;
        border-radius: 2px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        line-height: 48px;
        cursor: pointer;
      }
    }
  }
  .content-wrap{
    background-color: #fff;
    padding: 22px 0 25px 42px;
    box-sizing: border-box;
    font-family: PingFangSC-Medium, PingFang SC;
    .content-header-top{
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
      .content-title{
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        margin-right: 10px;
      }
      .content-tip{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #FA6400;
      }
    }
    .content-header-bottom{
      font-family: PingFangSC-Regular, PingFang SC;
      margin-bottom: 20px;
      .content-des{
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
        line-height: 20px;
      }
    }
    .content-tag-wrap{
      display: flex;
      // justify-content: space-between;
      align-items: center;
      font-family: PingFangSC-Medium, PingFang SC;
      flex-wrap: wrap;
      .tag-wrap{
        width: 304px;
        height: 254px;
        margin-bottom: 40px;
        margin-right: 65px;
        .tag-header{
          width: 100%;
          height: 40px;
          background: linear-gradient(225deg, #81A5FF 0%, #4B7EFE 100%);
          border-radius: 4px 4px 0px 0px;
          text-align: center;
          line-height: 40px;
          font-size: 18px;
          font-weight: 500;
          color: #FFFFFF;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          &.gray{
            background: linear-gradient(225deg, #B3B2DA 0%, #7578B4 100%);
          }
          &.yellow{
            background: linear-gradient(225deg, #ECD39E 0%, #D6A75B 100%);
          }
        }
        .tag-content{
          padding: 42px 50px 49px 51px;
          box-sizing: border-box;
          text-align: center;
          width: 100%;
          height: calc(100% - 40px);
          background: #FFFFFF;
          box-shadow: 0px 5px 4px 0px #F3F5FC;
          border-radius: 0px 0px 8px 8px;
          border: 1px solid #F3F5FC;
          font-family: PingFangSC-Regular, PingFang SC;
          .tag-num{
            font-size: 32px;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #333333;
            margin-bottom: 7px;
            white-space: nowrap;
          }
          .tag-num-des{
            font-size: 15px;
            font-weight: 400;
            color: #333333;
            margin-bottom: 33px;
            white-space: nowrap;
          }
          .tag-time{
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            white-space: nowrap;
            &.bottom{
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }
}

/deep/.el-icon-arrow-up:before{
    content: "\e790";
    font-size: 14px;
}
</style>